<template>
	<div id="app">
		<vueSignature ref="signature" :sigOption="option" :w="'100%'" :h="'50%'"></vueSignature> 
		<!-- <vueSignature ref="signature1" :sigOption="option"></vueSignature>  -->
		<button @click="save">保存</button>
		<button @click="clear">清除</button>
	</div>
</template>

<script>
export default {
	name: "app",
	data() {
		return {
			option:{
				penColor:"rgb(255,182,193)"
			}
		};
	},
	methods:{
		save(){
			var _this = this;
			var png = _this.$refs.signature.save()
			var jpeg = _this.$refs.signature.save('image/jpeg')
			var svg = _this.$refs.signature.save('image/svg+xml');
			console.log(png);
			console.log(jpeg)
			console.log(svg)
		},
		clear(){
			var _this = this;
			_this.$refs.signature.clear();
		}
	}
};
</script>